<template>
  <div class="login">
    <!-- 登录注册区域 -->
    <div class="loginAndRegBox">
      <div class="title-box"></div>
      <div>
        <!-- 登录模块 -->
        <div class="login-box submit-box"
             v-show="temp">
          <!-- 登录的表单 -->
          <form class="layui-form"
                id="form_login">
            <!-- 用户名框 -->
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-username"></i>
              <input type="text"
                     name="username"
                     lay-verify="required"
                     placeholder="请输入用户名"
                     autocomplete="off"
                     class="layui-input"
                     v-model.trim="username" />
            </div>
            <!-- 密码框 -->
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input type="password"
                     name="password"
                     placeholder="请输入密码"
                     autocomplete="off"
                     class="layui-input"
                     v-model.trim="password" />
            </div>
            <!-- 登录按钮 -->
            <div class="layui-form-item">
              <!-- 注意： 表单提交按钮和普通按钮的区别 就是 lay-submit 属性 -->
              <button class="
										layui-btn
										layui-btn-fluid
										layui-btn-normal
									"
                      lay-submit
                      @click.prevent="addFn">
                登录
              </button>
            </div>

            <div class="layui-form-item links">
              <a href="javascript:;"
                 id="link_reg"
                 @click="temp = !temp">去注册账号</a>
            </div>
          </form>
        </div>
        <!-- 注册模块 -->
        <div class="reg-box submit-box"
             v-show="!temp">
          <!-- 注册的表单 -->
          <form class="layui-form"
                id="form_reg">
            <!-- 用户名框 -->
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-username"></i>
              <input type="text"
                     name="username"
                     lay-verify="required"
                     placeholder="请输入用户名"
                     autocomplete="off"
                     class="layui-input"
                     v-model.trim="username" />
            </div>
            <!-- 密码框 -->
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input type="password"
                     name="password"
                     placeholder="请输入密码"
                     autocomplete="off"
                     class="layui-input"
                     v-model.trim="password" />
            </div>
            <!-- 密码确认框 -->
            <div class="layui-form-item">
              <i class="layui-icon layui-icon-password"></i>
              <input type="password"
                     name="repassword"
                     placeholder="请再次输入密码"
                     autocomplete="off"
                     class="layui-input"
                     v-model.trim="passwordd" />
            </div>
            <!-- 注册按钮 -->
            <div class="layui-form-item">
              <!-- 注意： 表单提交按钮和普通按钮的区别 就是 lay-submit 属性 -->
              <button class="
										layui-btn
										layui-btn-fluid
										layui-btn-normal
									"
                      lay-submit
                      @click.prevent="addFn">
                注册
              </button>
            </div>

            <div class="layui-form-item links">
              <a href="javascript:;"
                 id="link_login"
                 @click="temp = !temp">去登录</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入自己封装的方法
import {login,regUser} from '@/api/user'
export default {
  name: 'loginIndex',
  data(){
    return {
      temp: true, //控制登录于注册状态
      username: '', //用户名
      password: '', //密码
      passwordd: '' //二次密码
    }
  },
  methods:{
    //根据 temp 响应事件
    async addFn(){
      if(this.temp) {
        try{
          if(this.username === '' && this.password === '') return;
          //登录
        const {data} = await login( {
          username: this.username,
          password: this.password
        })
        console.log(data);
        this.$router.push({name: 'list'})
        }catch(err) {
          console.log(err);
        }
        }else{
          //注册
          try{
            if(this.password !== this.passwordd ) return;
            const {data} = await regUser(
              {
                username: this.username,
                password: this.password
                }
                )
                console.log(data);
                }catch(err) {
                  console.log(err);
                  }
      }
    }
  }
}
</script>

<style scoped >
 body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: url(../../assets/login_bg.jpg) no-repeat center;
    background-size: cover;
}
.login {
  width: 100vw;
  height: 50vw;
  background: url(../../assets/login_bg.jpg) no-repeat center;
  background-size: cover;
}

.loginAndRegBox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 310px;
    background-color: #fff;
    transform: translate(-50%, -50%);
}


.title-box {
    height: 60px;
    background: url(../../assets/login_title.png) no-repeat center;
}
/* .reg-box {
    display: none;
} */
.layui-form {
    padding: 0 30px;
}
.links {
    display: flex;
    justify-content: flex-end;
}
.links a {
    font-size: 12px;
}
.layui-form-item {
    position: relative;
}
.layui-icon {
    position: absolute;
    top: 10px;
    left: 10px;
}
.layui-input {
    padding-left: 32px;
}
</style>